<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<sp-visualization-config-outer
    [configurationValid]="
        currentlyConfiguredWidget.visualizationConfig.configurationValid
    "
>
    <sp-configuration-box title="Settings">
        <div fxLayout="column" fxLayoutGap="10px">
            <div
                fxLayout="row"
                fxLayoutGap="10px"
                fxLayoutAlign="start center"
                fxFlex="100"
            >
                <small fxFlex="30">Select Value Type</small>
                <mat-radio-group
                    [(ngModel)]="
                        currentlyConfiguredWidget.visualizationConfig
                            .selectedDataType
                    "
                    (change)="selectDataType($event.source.value)"
                >
                    <mat-radio-button [value]="'number'"
                        >Numeric Value</mat-radio-button
                    >
                    <mat-radio-button [value]="'boolean'"
                        >Boolean Value</mat-radio-button
                    >
                </mat-radio-group>
            </div>

            <div
                *ngIf="
                    currentlyConfiguredWidget.visualizationConfig
                        .selectedDataType === 'number'
                "
                fxLayout="column"
                fxLayoutGap="10px"
            >
                <div
                    fxLayout="row"
                    fxLayoutGap="10px"
                    fxLayoutAlign="start center"
                    fxFlex="100"
                >
                    <small
                        fxFlex="30"
                        matTooltip="Interval in seconds in which an event must arrive"
                        matTooltipPosition="above"
                        >Interval [sec]</small
                    >
                    <mat-form-field color="accent" appearance="outline" fxFlex>
                        <input
                            type="number"
                            [(ngModel)]="
                                currentlyConfiguredWidget.visualizationConfig
                                    .selectedInterval
                            "
                            matInput
                            (input)="selectInterval($event.target.value)"
                            min="0"
                        />
                    </mat-form-field>
                </div>
                <div
                    fxLayout="row"
                    fxLayoutGap="10px"
                    fxLayoutAlign="start center"
                    fxFlex="100"
                >
                    <small>Show Last Seen Timestamp</small>
                    <mat-checkbox
                        color="accent"
                        [(ngModel)]="
                            currentlyConfiguredWidget.visualizationConfig
                                .selectedLastSeen
                        "
                        (ngModelChange)="showLastSeen($event)"
                    >
                    </mat-checkbox>
                </div>
            </div>

            <div
                *ngIf="
                    currentlyConfiguredWidget.visualizationConfig
                        .selectedDataType === 'boolean'
                "
                fxLayout="column"
                fxLayoutGap="10px"
            >
                <div
                    fxLayout="row"
                    fxLayoutGap="10px"
                    fxLayoutAlign="start center"
                    fxFlex="100"
                >
                    <small fxFlex="30">Field</small>
                    <sp-select-property
                        [availableProperties]="fieldProvider.booleanFields"
                        [selectedProperty]="
                            currentlyConfiguredWidget.visualizationConfig
                                .selectedBooleanFieldToObserve
                        "
                        (changeSelectedProperty)="
                            selectBooleanFieldToObserve($event)
                        "
                        fxFlex
                    ></sp-select-property>
                </div>

                <div
                    fxLayout="row"
                    fxLayoutGap="10px"
                    fxLayoutAlign="start center"
                    fxFlex="100"
                >
                    <small fxFlex="30">Select Mapping</small>
                    <mat-radio-group
                        [(ngModel)]="
                            currentlyConfiguredWidget.visualizationConfig
                                .selectedMappingGreenTrue
                        "
                        (change)="selectMappingGreenTrue($event.source.value)"
                    >
                        <mat-radio-button [value]="true">
                            <span class="color-box green-box"></span> True
                            <span class="spacing"></span>
                            <span class="color-box red-box"></span> False
                        </mat-radio-button>
                        <mat-radio-button [value]="false">
                            <span class="color-box red-box"></span> True
                            <span class="spacing"></span>
                            <span class="color-box green-box"></span> False
                        </mat-radio-button>
                    </mat-radio-group>
                </div>
            </div>
        </div>
    </sp-configuration-box>
</sp-visualization-config-outer>
